<template>
  <div>
    <div>最原始的tiptap工程</div>
    <button @click="editor.chain().focus().toggleBold().run()">加粗</button>
    <editor-content :editor="editor" />
  </div>
</template>
 
<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import StarterKit from "@tiptap/starter-kit";

import { Collaboration } from "@tiptap/extension-collaboration";
import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

export default {
  components: {
    EditorContent,
  },

  props: {
    value: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      editor: null,
      ydoc:null,
    };
  },

  //   watch: {
  //     value(value) {
  //       // HTML
  //       const isSame = this.editor.getHTML() === value
  //       if (isSame) {
  //         console.log('this.editor.getHTML()====',isSame)
  //         return
  //       }
  //       this.editor.commands.setContent(value, false)
  //     },
  //   },

  mounted() {
    this.initYjs();
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor = new Editor({
        //   content: this.value,
        content: `<div> 现在Word 文档开始编辑...协同...光标...</div>`,
        extensions: [
          StarterKit,
          // yjs协同
          Collaboration.configure({
            document: this.ydoc, // 绑定 Yjs 文档
          }),
          CollaborationCursor.configure({
            provider: this.provider, // 绑定 Yjs 提供者
            user: {
              name: "用户 " + Math.floor(Math.random() * 100), // 随机用户名
              color: "#" + Math.floor(Math.random() * 16777215).toString(16), // 随机颜色
            },
          }),
        ],
        onUpdate: () => {
          this.$emit("input", this.editor.getHTML());
        },
      });
    },
    // 创建 Yjs 文档
    initYjs() {
      this.ydoc = new Y.Doc();
      // 创建 WebSocket 提供者
      this.provider = new WebsocketProvider(
        "ws://localhost:1234",
        "room-name",
        this.ydoc
      );
    },
  },

  beforeDestroy() {
    this.editor.destroy();
  },
};
</script>
<style lang="scss">
.collaboration-cursor__label{
  min-width: 50px;
  max-width: 100px;
  border-radius:6px;
}
.mainContent {
  display: flex;
  .toc-sidebar {
    width: 20%;
    .toc-item {
      white-space: nowrap;
      text-align: left;
      text-overflow: ellipsis;
      overflow: hidden;
      cursor: pointer;
      margin: 4px 0;
    }
  }
  .editorElement {
    flex: 1;
  }
}
/* 全局文档样式 */
.doc-paragraph {
  margin: 12px 0;
  line-height: 1.6;
  font-family: "SimSun", serif;
}

/* 表格样式 */
table {
  border-collapse: collapse;
  margin: 1rem 0;
  table-layout: fixed;
  max-width: 100% !important;
}

td,
th {
  padding: 8px;
  min-width: 50px;
  position: relative;
  vertical-align: top;
}

th {
  font-weight: bold;
}

/* 合并单元格提示 */
[colspan]:not([colspan="1"]),
[rowspan]:not([rowspan="1"]) {
  background-color: #f0f8ff;
}

/* 列宽调整手柄 */
.column-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #adf;
  pointer-events: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  border: 1px solid red !important; /* 调试用边框 */
}
/* 全局样式或组件内样式 */
.editor-image {
  border: 1px solid #ddd !important; /* 调试用边框 */
}

/* 覆盖潜在冲突样式 */
.ProseMirror {
  width: 100%;
  img {
    max-wdith: 100% !important;
  }
  .tableWrapper {
    display: flex;
    align-items: center;
  }
  table {
    border-collapse: collapse;
    border: 1px solid #000;
    margin: 5px;
  }
  td,
  td {
    border: 1px solid #000; /* 边框颜色和粗细 */
    padding: 8px; /* 内边距 */
  }
}
/* ✅ 确保图片可见性 */
.resizable-image {
  display: block !important;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  position: relative !important;
}

.resizable-image::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #2196f3;
  border-radius: 50%;
  cursor: nwse-resize;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
button {
  margin: 5px;
}

/* 统一对齐样式 */
.ProseMirror {
  p[data-text-align],
  h1[data-text-align],
  h2[data-text-align] {
    &[data-text-align="left"] {
      text-align: left;
    }
    &[data-text-align="center"] {
      text-align: center;
    }
    &[data-text-align="right"] {
      text-align: right;
    }
  }

  /* 图片浮动处理 */
  .float-image {
    max-width: 60%;
    &[data-align="left"] {
      float: left;
      margin: 0 1rem 1rem 0;
    }
    &[data-align="right"] {
      float: right;
      margin: 0 0 1rem 1rem;
    }
    &[data-align="center"] {
      display: block;
      margin: 1rem auto;
    }
  }
}

/* 清除浮动 */
.ProseMirror::after {
  content: "";
  display: table;
  clear: both;
}
</style>
